<template>
  <div class="tabs-container">
    <div class="tabs-item">
      <el-tabs
        v-model="activeTabName"
        :class="tabsStyleClass"
        @tab-click="tabClick"
        @tab-remove="tabRemove"
      >
        <el-tab-pane
          v-for="tab in tabsStore.visitedViews"
          :key="tab"
          :label="getLocaleLabel(tab.meta)"
          :name="tab.path"
          :closable="!isAffix(tab)"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <el-dropdown
      class="tabs-action"
      trigger="click"
      placement="bottom-end"
      @command="onClose"
    >
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :icon="Close" command="close">
            {{ $t("app.close") }}
          </el-dropdown-item>
          <el-dropdown-item :icon="CircleClose" command="closeOthers">
            {{ $t("app.closeOthers") }}
          </el-dropdown-item>
          <el-dropdown-item :icon="CircleCloseFilled" command="closeAll">
            {{ $t("app.closeAll") }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
      <el-icon><arrow-down /></el-icon>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "#imports";
import { watch, onMounted, ref, computed } from "vue";
import {
  ArrowDown,
  Close,
  CircleClose,
  CircleCloseFilled,
} from "@element-plus/icons-vue";
import { isCnLocale } from "~/utils/utils";

const appStore = useStore.appStore();
const tabsStore = useStore.tabsStore();
const routerStore = useStore.routerStore();
const route = useRoute();
const router = useRouter();
const { locale } = useI18n();

const activeTabName = ref(route.path);
const tabsStyleClass = computed(() => "tabs-item-" + appStore.theme.tabsStyle);

// 获取国际化label
const getLocaleLabel = (meta: any) => {
  return getLocaleTitle(locale.value, meta);
};
// 是否固定
const isAffix = (tab: any) => {
  return tab.meta && tab.meta.affix;
};

// 监听路由变化
watch(route, () => {
  // 当前路由，添加到tabs里
  if (route.name) {
    addTab();
  }
});

// 监听语言变化，更新activeTabName
watch(locale, () => {
  // 当语言变化时，需要更新activeTabName以匹配新的路径
  let currentPath = route.path;
  // 如果不是默认语言（zh-HK），需要移除语言前缀
  if (!isCnLocale(locale.value)) {
    const idx = currentPath.indexOf("/", 2);
    if (idx !== -1) {
      currentPath = currentPath.substring(idx);
    }
  }
  activeTabName.value = currentPath;
});

onMounted(() => {
  // 初始化
  initTabs();
  addTab();
});

// 初始化固定tab
const initTabs = () => {
  const affixTabs = getAffixTabs(routerStore.routes);
  for (const tab of affixTabs) {
    // 需要有tab名称
    if (tab.name) {
      tabsStore.addView(tab, locale.value);
    }
  }
};

// 获取需要固定的tabs
const getAffixTabs = (routes: any) => {
  let tabs: any[] = [];
  routes.forEach((route: any) => {
    if (route.meta && route.meta.affix) {
      let path: string = "";
      let lang = locale.value;
      if (isCnLocale(lang)) {
        path = route.path;
      } else {
        path = `/${lang}${route.path}`;
      }

      tabs.push({
        fullPath: path,
        path: path,
        name: route.name,
        meta: { ...route.meta },
      });
    }
    if (route.children) {
      const tempTabs = getAffixTabs(route.children);
      if (tempTabs.length >= 1) {
        tabs = [...tabs, ...tempTabs];
      }
    }
  });
  return tabs;
};

// 添加tab
const addTab = () => {
  console.log("route", route);
  tabsStore.addView(route, locale.value);
  tabsStore.addCachedView(route);

  // 设置activeTabName时也需要处理前缀
  let currentPath = route.path;
  if (!isCnLocale(locale.value)) {
    const idx = currentPath.indexOf("/", 2);
    if (idx !== -1) {
      currentPath = currentPath.substring(idx);
    }
  }
  activeTabName.value = currentPath;
};

// tab被选中
const tabClick = (tab: any) => {
  tab.props.name && router.push(tab.props.name);
};

// 点击关闭tab
const tabRemove = (path: any) => {
  const tab = tabsStore.visitedViews.filter((tab: any) => tab.path === path);
  closeTab(router, tab[0]);
};

// dropdown 关闭事件
const onClose = (type: string) => {
  switch (type) {
    case "close":
      closeTab(router, route);
      break;
    case "closeOthers":
      closeOthersTabs(router, route);
      break;
    case "closeAll":
      closeAllTabs(router, route);
      break;
  }
};
</script>

<style lang="less" scoped>
.tabs-container {
  display: flex;
  position: relative;
  z-index: 6;
  height: 40px;

  .tabs-item {
    transition: left 0.3s;
    flex-grow: 1;
    overflow: hidden;

    ::v-deep(.el-tabs__nav-prev) {
      padding: 0 10px;
      border-right: var(--el-border-color-extra-light) 1px solid;
    }

    ::v-deep(.el-tabs__nav-next) {
      padding: 0 10px;
      border-left: var(--el-border-color-extra-light) 1px solid;
    }

    ::v-deep(.is-scrollable) {
      padding: 0 32px;
    }

    ::v-deep(.el-tabs__active-bar) {
      height: 0;
    }

    ::v-deep(.el-tabs__item) {
      .is-icon-close {
        transition: none !important;

        &:hover {
          color: var(--el-color-primary-light-9);
          background-color: var(--el-color-primary);
          border-radius: 50%;
        }
      }
    }
  }
}

.tabs-item-style-1 {
  ::v-deep(.el-tabs__item) {
    padding: 0 15px !important;
    border-right: var(--el-border-color-extra-light) 1px solid;
    user-select: none;
    color: #8c8c8c;

    &:hover {
      color: #444;
      background: rgba(0, 0, 0, 0.02);
      font-size: 14px;
    }

    &.is-active {
      color: var(--el-color-primary);
      // background-color: var(--el-color-primary-light-9);
      // border-bottom: var(--el-border-color-light) 2px solid;

      &::before {
        background-color: var(--el-color-primary);
      }
    }

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      margin-right: 8px;
      display: inline-block;
      background-color: #ddd;
      border-radius: 50%;
    }
  }
}

.tabs-item-style-2 {
  ::v-deep(.el-tabs__item) {
    padding: 0 15px !important;
    border-right: none;
    user-select: none;
    color: #8c8c8c;
    display: inline-block;

    // &:hover {
    // 	color: #444;
    // 	background: rgba(0, 0, 0, 0.02);
    // 	border-bottom: var(--el-color-primary) 2px solid;
    // }

    &.is-active {
      color: var(--el-color-primary) !important;
      background-color: var(--el-color-primary-light-9) !important;
      border-bottom: var(--el-color-primary) 2px solid;

      &::before {
        background-color: var(--el-color-primary);
      }
    }
  }
}

.tabs-action {
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  align-items: center;
  cursor: pointer;
  color: #666;
  border-left: var(--el-border-color-extra-light) 1px solid;
  border-bottom: var(--el-border-color-light) 2px solid;
}
</style>
